<template>
  <div class="bottom">
    <div class="box">
      <span @click="close">返回</span>
      <div></div>
      <div class="piao" v-for="(item,index) of this.$store.state.myTickets" :key="index">
        <div>区域:{{item.seat}}</div>
        <div>价格:{{item.price}}</div>
        <div>已购:{{item.content}} 张</div>
        <div @click="del(item.ticketStall_id,item.content)">退票</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("chuan", false);
      $(document.body).css({
        "overflow-x": "scroll",
        "overflow-y": "scroll",
      });
    },
    del(val, val2) {
      this.axios
        .post(
          "/return",
          "userid=" +
            this.$store.state.userId +
            "&perid=" +
            this.$store.state.id +
            "&ticketid=" +
            val +
            "&content=" +
            val2
        )
        .then((res) => {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration:1000
          });
          this.$emit("chuan", false);
          $(document.body).css({
            "overflow-x": "scroll",
            "overflow-y": "scroll",
          });
          this.$router.push("user");
        });
    },
  },
  mounted() {},
};
</script>

<style scoped>
.bottom {
  position: fixed;
  z-index: 20;
  height: 100px;
  width: 100px;
}
.box {
  width: 100vw;
  bottom: 0;
  position: fixed;
  /*bottom: 0;*/
  background-color: white;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.box > div:nth-child(2) {
  border-top: 1px solid #d3d4d5;
}
.piao {
  font-size:15px;
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.piao div {
  width: 70px;
}
.piao div:last-child {
  color: cornsilk;
  width: 80px;
  background-image: linear-gradient(to right, #ff4aae, #ff1268);
  border-radius: 15px;
}
</style>